<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件上传测试</title>
    <link rel="stylesheet" href="/static/css/element-ui/element-ui.css">
    <link rel="stylesheet" href="/static/css/public.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/public.js"></script>
</head>
<body>
<div v-cloak id="app">
    <%--
    name: 上传文件字段名
    fileExtra: 上传时附带的额外参数
    on-success: 文件上传成功时的钩子,function(response, file, fileList)
    on-error: 文件上传失败时的钩子,function(err, file, fileList)
    before-upload:上传文件之前的钩子,若返回 false则停止上传,function(file)
    on-progress: 文件上传时的钩子,function(event, file, fileList)
    --%>
    <el-upload
            show-file-list="false"
            name="file"
            :data="fileExtra"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload"
            :on-progress="uploadProgress"
            action="/tencent/cos/upload"
    >
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <img src="/system/file/img/4028b8816df2a856016df2abc20a0000">


</div>
<script>
    $(function () {
    });

    var data = {
        fileExtra: {}
    };

    var methods = {
        uploadSuccess: function (res, file, fileList) {
            console.log(res);
        },
        uploadError: function (err, file, fileList) {

        },
        beforeUpload: function (file) {

        },
        uploadProgress: function (event, file, fileList) {

        }
    };
    var vm = new Vue({data: data, methods: methods}).$mount("#app");
</script>
</body>
</html>
